<template>
  <view class="container">
    <view class="main-title">输入验证码</view>
    <view class="small-title">短信验证码已发送至{{ showmobile }}</view>

    <!-- 输入验证码 -->
    <view class="enter-code">
      <u-message-input
        mode="bottomLine"
        :width="88"
        name="Password"
        v-model="Password"
        :maxlength="6"
        :breathe="true"
        :focus="true"
        active-color="#FBB000"
        inactive-color="#666"
        @change="changeInput"
      ></u-message-input>
    </view>
    <view
      v-if="showText"
      class="send again-send"
      @click="$u.throttle(sendCode(1), 3000)"
      >重新获取验证码</view
    >
    <view v-else class="send">{{ second }}s重新发送</view>
    <!-- 下一步 -->
    <view>
      <!-- 下一步高亮 -->
      <button
        v-if="btnActive && !isDisabled"
        class="btn-primary"
        @click="nextStep"
      >
        下一步
      </button>
      <!-- 下一步灰色 -->
      <button v-else class="btn-disable" @click="$u.throttle(nextStep, 3000)">
        {{ btnActive ? '下一步' : '验证码过期或错误' }}
      </button>
    </view>
  </view>
</template>

<script src="./enterCode.js"></script>
<style scoped lang="scss">
@import './enterCode.scss';
</style>
